<template>
  <div class="visitor-alreadyVisited">
    <template v-if="isPoliceAgencyId.isChildren == false">
      <div v-has="'police:add-btn'" class="add-btn cursor" @click="handelAdd">+ 新增</div>
    </template>
    <div class="search-group">
      <div class="input-wrap">
        <div class="label">人员姓名</div>
        <div class="input-item">
          <j-input v-model="queryParam.userName" :maxLength="30" clearable placeholder="请填写姓名"></j-input>
        </div>
      </div>
      <div class="input-wrap">
        <div class="label">警号</div>
        <div class="input-item">
          <j-input v-model="queryParam.policeUserNo" :maxLength="30" clearable placeholder="请填写警号"></j-input>
        </div>
      </div>
      <div class="input-wrap">
        <div class="label">手机号码：</div>
        <div class="input-item">
          <j-input v-model="queryParam.mobile" :maxLength="11" clearable placeholder="请填写手机号码"></j-input>
        </div>
      </div>
      <div class="input-wrap">
        <div class="label">绑定状态：</div>
        <div class="input-item">
          <a-select v-model="queryParam.state" allowClear placeholder="请选择">
            <a-select-option :value="0"> 未绑定 </a-select-option>
            <a-select-option :value="1"> 已绑定 </a-select-option>
          </a-select>
        </div>
      </div>
      <div class="btn-wrap">
        <a-button class="searchBtn" type="primary" @click="searchQuery()"> 搜索 </a-button>
        <a-button class="resetBtn" type="primary" @click="searchReset()"> 重置 </a-button>
      </div>
    </div>
    <div class="table-wrap">
      <a-table
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        :pagination="ipagination"
        class="tableList"
        rowKey="id"
        @change="handleTableChange"
      >
        <template #pic="records">
          <img v-if="records.userImage" :src="imgPrefix + records.userImage" style="width: 0.5rem; height: 0.5rem" />
          <img v-else alt="" src="@/assets/imgs/tableperson.png" style="width: 0.5rem; height: 0.5rem" />
        </template>
        <template v-slot:action="records">
          <span v-has="'police:detail'" class="operation deatil-color" @click="detailsHandle(records)">详情 </span>
          <span v-has="'police:add-btn'" class="operation deatil-color" @click="handelAdd(records)">编辑 </span>
          <span v-has="'police:detail'" class="operation deatil-color" @click="handleReset(records)">重置 </span>
          <span v-has="'police:add-btn'" class="operation warnColor" @click="showDelete(records)">删除 </span>
        </template>
      </a-table>
    </div>

    <add-modal ref="addModal" @refresh="loadData"></add-modal>
    <detail-modal ref="detailModal"></detail-modal>

    <allMessage
      ref="allMessage"
      :content="confirmContent"
      :publicVisible="publicVisible"
      :title="confirmTitle"
      @cancel="publicVisible = false"
      @tipMessage="tipMessage"
    ></allMessage>
  </div>
</template>
<script>
import addModal from './modules/addPoliceModal'
import detailModal from './modules/detailsPoliceModal'
import { getAction, deleteAction } from '@/api/manage'
import allMessage from '@/components/allMessage'
import startEndTime from '@/components/startEndTime'
import JInput from '@/components/jeecg/JInput'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { comMethods } from '@/mixins/comMethods'
import { mapState } from 'vuex'
import { editDeviceId } from '../../api/api'

export default {
  name: 'policeOfficer',
  components: { allMessage, startEndTime, JInput, addModal, detailModal },
  mixins: [JeecgListMixin, comMethods],
  data() {
    return {
      url: {
        list: '/police/user/page',
        tree: true,
      },
      showBtns: false,
      publicVisible: false,
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '所属派出所',
          dataIndex: 'policeAgencyId_dictText',
          // ellipsis: true,
          align: 'center',
          // scopedSlots: { customRender: 'policeAgencyId_dictText' },
        },
        {
          title: '证件照 ',
          align: 'center',
          scopedSlots: { customRender: 'pic' },
        },
        {
          title: '姓名',
          dataIndex: 'userName',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '警号',
          dataIndex: 'policeUserNo',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '手机号码',
          dataIndex: 'mobile',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '管辖辖区',
          dataIndex: 'jurisdictionName',
          ellipsis: true,
          align: 'center',
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        },
        {
          title: (
            <div>
              绑定状态
              <a-tooltip placement="top">
                <template slot="title">
                  <span>当前账号是否与设备进行绑定</span>
                </template>
                <a-icon style="margin-left: 4px" type="question-circle" />
              </a-tooltip>
            </div>
          ),
          ellipsis: true,
          align: 'center',
          dataIndex: 'state',
          customRender: function (t, r, index) {
            return t == 0 ? '未绑定' : '已绑定'
          },
        },
        {
          title: '添加时间',
          align: 'center',
          ellipsis: true,
          dataIndex: 'createTime',
          width: 180,
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          align: 'center',
          width: 200,
        },
      ],
      confirmContent: '',
      confirmTitle: '',
    }
  },
  computed: {
    ...mapState({
      isPoliceAgencyId: (state) => state.user.isPoliceAgencyId,
    }),
  },
  watch: {
    isPoliceAgencyId(v) {
      this.queryParam.policeAgencyId = v.id ? v.id : ''
      this.searchQuery()
    },
  },
  mounted() {},
  methods: {
    timeChange(v, index) {
      if (index == 1) {
        this.queryParam.startTime = this.$moment(v).valueOf()
      } else {
        this.queryParam.endTime = this.$moment(v).valueOf()
      }
      if (v == null) {
        this.queryParam.startTime = null
        this.queryParam.endTime = null
      }
    },

    showDelete(records) {
      this.publicVisible = true
      this.confirmTitle = '删除'
      this.confirmContent = '确定删除该信息么？'
      this.$refs.allMessage.show(records)
    },

    handleReset(records) {
      this.publicVisible = true
      this.confirmTitle = '重置'
      this.confirmContent = '请确认是否重置绑定状态？'
      this.$refs.allMessage.show(records)
    },
    async tipMessage(records) {
      let res
      if (this.confirmTitle === '删除') {
        res = await deleteAction('/police/user/delete', { id: records.id })
      } else {
        res = await editDeviceId({ id: records.id })
      }
      this.$message.success(res.message)
      this.publicVisible = false
      this.searchQuery()
    },

    handelAdd(record) {
      record.imgPrefix = this.imgPrefix
      record.policeAgencyId = this.queryParam.policeAgencyId
      this.$refs.addModal.show(record, 0)
    },

    detailsHandle(record) {
      record.imgPrefix = this.imgPrefix
      this.$refs.detailModal.show(record, 0)
    },

    beforeFetch(params) {
      if (params.order) {
        delete params.order
      }
    },
  },
}
</script>
<style lang="less" scoped>
.add-btn {
  width: 90px;
  height: 40px;
  background: #1388ff;
  border-radius: 8px 8px 8px 8px;
  border: 0.01rem solid var(--theme-input-border);
  line-height: 40px;
  transform: translateY(-140%);

  font-weight: bold;
  font-size: 16px;
  color: #0e2b48;
}
</style>
